<template>
    <div>
        <div class="wrap">
            <input v-if="isIpt=='input'" ref="ipt" type="text" :maxlength="maxLh" v-model="ipt">
            <textarea cols="30" rows="10" v-else-if="isIpt=='textarea'" ref="ipt"  :maxlength="maxLh" v-model="ipt"></textarea>
            <span  :class="isIpt=='input'?'sp':'sp2'">{{ipt.length}}/{{maxLh}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                ipt:""
            }
        },
        props:{
            isIpt:{
                type:String,
                default:'input'
            },
            maxLh:{
                type:[String,Number],
                default:10
            }
        },
        watch:{
            ipt(){
                this.ipt.length == this.maxLh ? this.$refs.ipt.style='color:red' : this.$refs.ipt.style=''
            }
        }
    }
</script>

<style scoped>
.wrap{
    position: relative;
    display: inline-block;
}
.sp {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
    color: #909399;
}
.sp2 {
    position: absolute;
    bottom: 5px;
    right: 6px;
    font-size: 12px;
    color: #909399;
}
</style>